<template>
	<!-- 首页 -->
	<div class="wrap">
		<!-- 轮播图 -->
		<div class="banner">
			<el-carousel height="854px" :interval="3000" arrow="always">
				<el-carousel-item height="854px" v-for="val in banners" :key="val">
					<img :src="val" alt="" />
				</el-carousel-item>
			</el-carousel>
		</div>
		<!-- 内容 -->
		<div class="cont">
			<!-- 第一块内容 -->
			<div class="cont1">
				<!-- 介绍 -->
				<div class="cont1_cont">
					<!-- 标题 -->
					<div class="cont1_title">走进蓝月亮</div>
					<!-- 文本 -->
					<div class="cont1_text">
						蓝月亮品牌创立于1992年，是中国领先的以消费者为核心、以创新为驱动力的家庭清洁解决方案提供商。<br />
						我们的愿景：让每一个家庭生活在蓝月亮的世界里，洁净、健康、舒适、体面、快乐。<br />
						我们的使命：提供卓越产品、极致服务、专业咨询，让消费者洁净无忧。<br />
						我们的价值观：为用户，更卓越。
					</div>
				</div>
				<!-- 列表 -->
				<div class="cont1_list flex">
					<div
						v-for="(item, index) in list1"
						:class="{ list1, list1_curr: index == 1 }"
						:key="item.text"
					>
						<a>
							<img :src="item.img" />
							<div class="list1_mask">
								<div class="mask_title">{{ item.text }}</div>
								<div class="mask_icon">
									<img src="./img/右箭头.png" />
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
			<!-- 第二块内容 -->
			<div class="cont2">
				<!-- 标题 -->
				<div class="cont2_title">
					<div class="title_left">洁净之家</div>
					<div class="title_right">更多</div>
				</div>
				<!-- 列表 -->
				<div class="list2">
					<img class="list2_left" src="./img/list2_左.png" />
					<img class="list2_right" src="./img/list2_右.png" />
					<div class="list2_cont">
						<div class="list2_con">
							<div class="list2_list" v-for="item in list2" :key="item.text">
								<a>
									<img :src="item.img" />
									<div>{{ item.text }}</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第三块内容 -->
			<div class="cont3">
				<!-- 标题 -->
				<div class="cont3_title">
					<div class="title3_left">新闻动态</div>
					<div class="title3_right">更多</div>
				</div>
				<!-- 列表 -->
				<div class="list3">
					<img class="list3_left" src="./img/list2_左.png" />
					<img class="list3_right" src="./img/list2_右.png" />
					<div class="list3_cont">
						<div class="list3_con">
							<div class="list3_list" v-for="item in list3" :key="item.text">
								<a>
									<div class="list3_box">
										<div class="box_top">
											<div class="date">{{ item.date }}</div>
											<div class="year">{{ item.year }}</div>
										</div>
										<div class="box_bottom">
											<div>{{ item.text }}</div>
										</div>
									</div>
									<img :src="item.img" />
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			banners: [
				require('./img/banner1.jpg'),
				require('./img/banner2.jpg'),
				require('./img/banner3.jpg'),
				require('./img/banner4.jpg'),
				require('./img/banner5.jpg'),
				require('./img/banner6.jpg'),
			],
			list1: [
				{
					img: require('./img/into1.jpg'),
					text: '关于我们',
				},
				{
					img: require('./img/into2.png'),
					text: '企业文化',
				},
				{
					img: require('./img/into3.jpg'),
					text: '企业职责',
				},
			],
			list2: [
				{
					img: require('./img/list1.png'),
					text: '至尊生物科技 洗衣液',
				},
				{
					img: require('./img/list2.jpg'),
					text: '自动洗手机',
				},
				{
					img: require('./img/list3.png'),
					text: '净享氨基酸 洗手露',
				},
				{
					img: require('./img/list4.png'),
					text: '天露餐具果蔬 洁净精华',
				},
			],
			list3: [
				{
					img: require('./img/news1.gif'),
					date: '8月13日',
					year: '2021',
					text: '蓝月亮与中粮包装签署战略合作框架协议',
				},
				{
					img: require('./img/news2.jpg'),
					date: '8月2日',
					year: '2021',
					text: '蓝月亮向河南捐赠1000万元物资',
				},
				{
					img: require('./img/news3.jpg'),
					date: '5月28日',
					year: '2021',
					text: '蓝月亮发布首份ESG报告 用产品赋能美好生活',
				},
			],
		}
	},
}
</script>

<style lang="scss" scoped>
* {
	margin: 0;
	padding: 0;
}
a {
	text-decoration: none;
}
ul,
li {
	list-style: none;
}
.flex {
	display: flex;
}
.wrap {
	margin-top: 80px;
	// 轮播图
	.banner {
		width: 100%;
		height: 854px;
		.el-carousel__container {
			height: 854px;
		}
		.el-carousel__item img {
			width: 100%;
			height: 854px;
		}
	}
	// 内容
	.cont {
		max-width: 85vw;
		margin: 0 auto;
		padding-bottom: 80px;
		// 第一块内容
		.cont1 {
			text-align: center;
			margin: 50px 0 80px;
			// 介绍
			.cont1_cont {
				margin-bottom: 50px;
				// 标题
				.cont1_title {
					font-size: 20px;
					color: #333;
					margin-bottom: 20px;
					font-weight: 500;
				}
				// 文本
				.cont1_text {
					font-size: 18px;
					color: #999;
					line-height: 26px;
					white-space: pre-line;
					word-wrap: break-word;
					font-weight: 400;
				}
			}
			// 列表
			.cont1_list {
				align-items: center;
				justify-content: space-around;
				.list1_curr {
					margin: 0 3%;
				}
				.list1:hover {
					cursor: pointer;
					transform: scale(1.1);
					box-shadow: 0 0 40px rgb(0 0 0 / 20%);
				}
				.list1 {
					position: relative;
					flex-grow: 1;
					flex: 0 0 28%;
					text-align: center;
					box-sizing: border-box;
					background-size: 100% auto;
					font-size: 0;
					transition: all 0.5s ease-out;
					a {
						img {
							width: 100%;
							height: 100%;
							display: inline-block;
						}
						.list1_mask {
							font-size: 22px;
							font-family: OPPOSans-R;
							position: absolute;
							bottom: 0;
							left: 0;
							right: 0;
							color: #fff;
							padding: 3% 0;
							background-color: rgba(0, 0, 0, 0.3);
							justify-content: center;
							align-items: center;
							transform: translateZ(0);
							font-weight: 500;
							display: flex;
							flex-flow: row wrap;
							align-content: flex-start;
							text-align: center;
							overflow: hidden;
							.mask_title {
								margin-right: 4%;
							}
							.mask_icon {
								display: inherit;
								img {
									width: 50%;
									height: 100%;
									display: inline-block;
								}
							}
						}
					}
				}
			}
		}
		// 第二块内容
		.cont2 {
			margin-bottom: 80px;
			// 标题
			.cont2_title {
				position: relative;
				text-align: center;
				margin-bottom: 50px;
				.title_left {
					font-size: 24px;
					color: #333;
					font-weight: 500;
				}
				.title_right {
					position: absolute;
					top: 0;
					right: 26px;
					font-size: 16px;
					color: #999;
					cursor: pointer;
					font-weight: 400;
				}
			}
			// 列表
			.list2 {
				position: relative;
				padding: 0 10px;

				.list2_left {
					position: absolute;
					top: 50%;
					width: 54px;
					cursor: pointer;
					z-index: 666;
					opacity: 1;
					background-image: none !important;
					width: 54px !important;
					height: auto !important;
					left: -40px;
				}
				.list2_right {
					position: absolute;
					top: 50%;
					width: 54px;
					cursor: pointer;
					z-index: 666;
					opacity: 1;
					background-image: none !important;
					width: 54px !important;
					height: auto !important;
					right: auto;
					right: -40px;
				}
				.list2_cont {
					margin-left: auto;
					margin-right: auto;
					position: relative;
					overflow: hidden;
					list-style: none;
					padding: 0;
					z-index: 1;
					overflow: visible !important;
					.list2_con {
						transform: translate3d(0px, 0px, 0px);
						padding: 40px;
						margin-left: -40px;
						position: relative;
						width: 100%;
						height: 100%;
						z-index: 1;
						display: flex;
						transition-property: transform, -webkit-transform;
						box-sizing: content-box;
						.list2_list:hover {
							cursor: pointer;
							transform: scale(1.1);
							box-shadow: 0 0 40px rgb(0 0 0 / 20%);
						}
						.list2_list:hover a div {
							background-color: #1d3e97;
							color: #fff;
						}
						.list2_list {
							width: 253.985px;
							margin-right: 90.02px;
							position: relative;
							text-align: center;
							box-sizing: border-box;
							border: 1px solid #e3e3e3;
							transition: all 0.5s ease-out;
							padding-bottom: 15px;
							white-space: pre-line;
							word-wrap: break-word;
							display: block;
							flex-shrink: 0;
							height: 100%;
							a {
								user-select: none;
								color: #333;
								img {
									width: 100%;
									height: 100%;
									display: inline-block;
									margin-bottom: 20%;
								}
								div {
									position: absolute;
									bottom: 0;
									left: 0;
									right: 0;
									top: 78%;
									padding: 6% 0.3rem;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 21px;
									color: #333;
									background-color: #fff;
									transition: all 0.2s ease-out;
									white-space: pre-line;
									word-wrap: break-word;
								}
							}
						}
					}
				}
			}
		}
		// 第三块内容
		.cont3 {
			margin-bottom: 80px;
			// 标题
			.cont3_title {
				position: relative;
				text-align: center;
				margin-bottom: 50px;
				.title3_left {
					font-size: 24px;
					color: #333;
					font-weight: 500;
				}
				.title3_right {
					position: absolute;
					top: 0;
					right: 26px;
					font-size: 16px;
					color: #999;
					cursor: pointer;
					font-weight: 400;
				}
			}
			// 列表
			.list3 {
				position: relative;
				padding: 0 10px;

				.list3_left {
					position: absolute;
					top: 50%;
					width: 54px;
					cursor: pointer;
					z-index: 666;
					opacity: 1;
					background-image: none !important;
					width: 54px !important;
					height: auto !important;
					left: -40px;
				}
				.list3_right {
					position: absolute;
					top: 50%;
					width: 54px;
					cursor: pointer;
					z-index: 666;
					opacity: 1;
					background-image: none !important;
					width: 54px !important;
					height: auto !important;
					right: auto;
					right: -40px;
				}
				.list3_cont {
					margin-left: auto;
					margin-right: auto;
					position: relative;
					overflow: hidden;
					list-style: none;
					padding: 0;
					z-index: 1;
					overflow: visible !important;
					.list3_con {
						transform: translate3d(0px, 0px, 0px);
						padding: 30px;
						margin-left: -30px;
						position: relative;
						width: 100%;
						height: 100%;
						z-index: 1;
						display: flex;
						transition-property: transform, -webkit-transform;
						box-sizing: content-box;
						.list3_list:hover {
							cursor: pointer;
							transform: scale(1.1);
							box-shadow: 0 0 40px rgb(0 0 0 / 20%);
						}
						.list3_list:hover a .list3_box {
							background-color: #1d3e97;
							color: #fff;
						}
						.list3_list {
							width: 377.227px;
							margin-right: 77.16px;
							position: relative;
							text-align: center;
							font-size: 0;
							transition: all 0.5s ease-out;
							cursor: pointer;
							flex-shrink: 0;
							height: 100%;
							a {
								.list3_box {
									padding: 30px;
									font-size: 11px;
									color: grey;
									background-color: #f2f2f2;
									transition: all 0.5s ease-out;
									.box_top {
										display: flex;
										justify-content: space-between;
										align-items: flex-end;
										padding-top: 10px;
										word-break: break-word;
										.date {
											margin-bottom: 10px;
											height: 38px;
											line-height: 19px;
											font-size: 22px;
											font-weight: 700;
										}
										.year {
											margin-bottom: 10px;
											height: 38px;
											line-height: 19px;
											font-size: 14px;
											font-weight: 500;
										}
									}
									.box_bottom {
										display: flex;
										justify-content: space-between;
										align-items: flex-end;
										padding-top: 10px;
										word-break: break-word;
										div {
											margin-bottom: 10px;
											height: 38px;
											line-height: 19px;
											font-size: 14px;
											text-align: left;
											font-weight: 500;
											overflow: hidden;
											text-overflow: ellipsis;
											display: -webkit-box;
											-webkit-line-clamp: 2;
											-webkit-box-orient: vertical;
										}
									}
								}
								img {
									width: 100%;
									height: 100%;
									display: inline-block;
								}
							}
						}
					}
				}
			}
		}
		//
	}
}
</style>